<template>
  <div>
    <!-- 工具栏组件 -->
    <ToolBar>
      <div>
        <!-- 添加轮播图按钮 -->
        <el-button type="primary" size="small" @click="showEditDialog = true">添加轮播图</el-button>
      </div>

    </ToolBar>
    <!-- 表格组件 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="轮播id"></el-table-column>
      <el-table-column prop label="图片">
        <template slot-scope="s">
          <el-image style="width: 100px; height: 100px" :src="imageApi + s.row.imgUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240">
        <div slot-scope="s">
          <!-- 编辑按钮 -->
          <el-button type="primary" size="small" @click="editItem(s.row.id)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="small" @click="del(s.row.id)">删除</el-button>
        </div>
      </el-table-column>
    </el-table>
<!-- 编辑组件 -->
    <Edit :showEditDialog="showEditDialog" @close="showEditDialog = false" @success="refresh()" />
  </div>
</template>

<script>
import { getBanner } from "@/api/bannerManage/list"; // 导入获取轮播图数据的API
import { exportCvsTable } from "@/utils/cvs"; // 导入导出CSV表格工具函数
import { resetObject } from "@/utils/common"; // 导入重置对象函数
import { serverApiUrl } from "@/config/apiUrl"; // 导入服务器API地址配置
import { todelBanner } from "@/api/bannerManage/list"; // 导入删除轮播图的API
import Edit from "./Edit.vue"; // 导入编辑组件
export default {
  data() {
    return {
      serverImageUrl: serverApiUrl, // 服务器图片地址，可从后端获取
      imageApi: serverApiUrl,
 
      showEditDialog: false, // 控制编辑对话框的显示与隐藏
      tableData: [], // 表格数据数组

      id: null, // 当前编辑轮播图的id
      stateValue: 1 // 轮播图状态值
    };
  },
  created() {
    this.initData(); //页面加载就初始化商品数据，默认选第一页的数据
  },
  methods: {

    initData() {
      getBanner({

      }).then(r => { // 调用API获取轮播图数据
        this.tableData = r; // 将数据赋值给表格数据数组
      }).catch(() => {

      });
    },
    editItem(id) {
      this.id = id; // 将要编辑的轮播图id赋值给data中的id
      this.showEditDialog = true; // 显示编辑对话框
    },

    refresh() {
      this.initData();// 刷新表格数据
      
    },
    returnData(pageList) {
      this.tableData = pageList.list; // 返回表格数据
    },
    clearSearchParams() {
      resetObject(this.searchParams); // 清空搜索参数
      this.refresh(); // 刷新表格数据
    },
    del(id) {
      this.$confirm("确定删除?", "提示", {// 确认删除弹窗
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          todelBanner({ "id": id });// 调用API删除轮播图
          location.reload();// 刷新页面
        })
        .catch(() => { });
      this.initData();// 重新获取轮播图数据
    },

  },

  components: { Edit }
};
</script>
